<template>
  <div class="passenger-flow-condition" ref="container"></div>
</template>
<script setup>
import {onMounted, watch, ref} from "vue";
import {range, sampleSize} from "lodash";
import useEcharts from "../../utils/useCharts";

const {container, echarts, setOption} = useEcharts();

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
})
const echartData = ref({});
watch(() => props.tableData, (newVal) => {
      processEchartData();
    },
    {
      // immediate: true,
      deep: true
    })
const processEchartData = () => {
  const dates = new Set();
  const timeNames = new Set();
  const groupedData = {};
  let maxVal = -Infinity;
  let minVal = Infinity;

  // 提取所有日期和时间点并按日期分组
  props.tableData.forEach(item => {
    const date = item.outputDate.split(' ')[0];
    const time = item.timeName;
    const value = item.outputValue;

    dates.add(date);
    timeNames.add(time);

    if (!groupedData[date]) {
      groupedData[date] = {};
    }
    groupedData[date][time] = value;

    // 计算最大值和最小值
    if (value > maxVal) maxVal = value;
    if (value < minVal) minVal = value;
  });

  // 构建 ECharts 数据格式
  const sortedDates = Array.from(dates).sort();
  const sortedTimes = Array.from(timeNames).sort();

  const seriesData = sortedDates.map(date => ({
    name: date,
    type: 'bar',
    data: sortedTimes.map(time => {
      const value = groupedData[date][time];
      if (value === undefined) {
        console.warn(`Missing value for date=${date}, time=${time}`);
      }
      return value || null;
    })
  }));

  echartData.value = {
    times: sortedTimes,
    seriesData: seriesData,
    maxVal: maxVal,
    minVal: minVal
  };
  console.log(echartData.value)
  // 初始化 ECharts 图表
  const options = generateOptions();
  setOption(options);
};
// // 计算数据的最大值和最小值
// let maxValue = Math.max(...data);
// let minValue = Math.min(...data);

const generateOptions = () => {
  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#2f2f48",
      borderColor: "#2f2f48",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "5%",
      right: "2%",
      bottom: "12%",
      top: "8%",
    },
    legend: {
      icon: 'Rect',
      orient: 'horizontal',
      itemWidth: 20,
      itemHeight: 2,
      data: echartData.value.seriesData.map(series => series.name),
      textStyle: {
        fontSize: 12, //字体大小
        color: "#000000", //字体颜色
      },
      right: '10%', //距离右侧
      height: 260,  //设置高度，超出翻页
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#9292c1",
        fontSize: 15,
        margin: 20,
      },
      data: echartData.value.times,
    },
    yAxis: {
      name: '单位 (MW)',
      type: "value",
      min: echartData.value.minVal,
      max: echartData.value.maxVal,
      axisLabel: {
        color: "#9292c1",
      },
      splitLine: {
        lineStyle: {
          color: "#9292c130",
          type: "dashed",
        },
      },
    },
    series: echartData.value.seriesData
    // series: [
    //   {
    //     name: "重点乘客",
    //     type: "line",
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //         { offset: 0, color: "#32fedb" },
    //         { offset: 1, color: "#319cfc" },
    //       ]),
    //     },
    //     barWidth: 20,
    //     data: sources[0],
    //     animationDuration: 3000,
    //     animationEasing: "cubicInOut",
    //   },
    //   {
    //     name: "常乘客",
    //     type: "line",
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //         { offset: 0, color: "#f7cd5e" },
    //         { offset: 0.8, color: "#ee8149" },
    //       ]),
    //     },
    //     barWidth: 20,
    //     data: sources[1],
    //     animationDuration: 3000,
    //     animationEasing: "cubicInOut",
    //   },
    //   {
    //     name: "管控人员",
    //     type: "line",
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //         { offset: 0, color: "#de38fb" },
    //         { offset: 1, color: "#6732f3" },
    //       ]),
    //     },
    //     barWidth: 20,
    //     data: sources[2],
    //     animationDuration: 3000,
    //     animationEasing: "cubicInOut",
    //   },
    // ],
  };
};

onMounted(() => {
  // const sources = [
  //   sampleSize(range(1000, 200), 7),
  //   sampleSize(range(1000, 200), 7),
  //   sampleSize(range(1000, 200), 7),
  // ];

  // const options = generateOptions(sources);
  // setOption(options);
});
</script>
<style lang="scss" scoped>
.passenger-flow-condition {
  width: 100%;
  height: calc(100% - 44px);
  min-height: 300px;
}
</style>
